<script lang="ts" setup>
import Aside from "@/components/Black/Aside.vue";
import SingleMeatPage from "@/components/Black/SingleMeatPage.vue";
import Show from "@/components/Black/Show.vue";

import { onMounted, ref, watch } from "vue";
//搜索页面
import { useRoute } from "vue-router";
import useGetData from "@/store/get";
//实例化路由
const route = useRoute();
// 实例化 store
const store = useGetData();

//创建方法，输入搜索词，返回当前搜索内容的返回值
const getReturnData = async (q: string) => {
  const data = await store.GetSearchData(q);
  return data;
};

//存储数据
const data = ref();
//输入框中的内容
const keywords = ref("");
onMounted(async () => {
  //拿到当前搜索内容
  const q = route.params.q as string;
  //拿到结果
  data.value = await getReturnData(q);
  //将搜索内容存储进输入框
  keywords.value = q;
});

</script>
<template>
  <section class="search">
    <Aside></Aside>
    <!--预览筛选位置-->
    <div class="results">
      <div class="results__content">
        <!--若没有结果，则不显示-->
        <div class="result">
          <Show :data="data">
            <template #yes>
              <div class="result__summary">{{ data?.length }}个搜索结果</div>
              <!--开始循环渲染-->
              <SingleMeatPage
                :data="item"
                v-for="item in data"
              ></SingleMeatPage>
              <!--结束循环渲染-->
            </template>
            <template #skeleton>
              <el-skeleton animated :throttle="500">
                <template #template>
                  <div class="result__summary">
                    <el-skeleton-item variant="text" style="width: 50%" />
                  </div>
                  <!--开始循环渲染-->
                  <SingleMeatPage :data="undefined"></SingleMeatPage>
                  <!--结束循环渲染-->
                </template>
              </el-skeleton>
            </template>
            <template #no>
              <!--跳转并将值传给404页-->
              <h2 class="result__none">
                <span>很抱歉，找不到您查询的结果。</span>
              </h2>
              <aside id="search-wrapper">
                <form :action="`/search/${keywords}`">
                  <el-input
                    clearable
                    v-model="keywords"
                    placeholder="搜索本站内容"
                    size="large"
                  >
                    <template #prefix>
                      <el-icon><search /></el-icon>
                    </template>
                  </el-input>
                </form>
              </aside>
            </template>
          </Show>

          <!--没有找到结果-->
        </div>
      </div>
    </div>
  </section>
</template>
<style lang="less" scoped>
//搜索页

.result:last-of-type {
  border-bottom: 1px solid #d2d2d7;
  padding-bottom: 32px;
  margin-bottom: 80px;
}
.result__summary {
  color: #6e6e73;
  text-transform: lowercase;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 40px;
  margin-bottom: 32px;
}

//找不到结果
.result__none {
  width: 100%;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: center;

  padding-top: 25%;
}

//搜索

#search-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 490px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1068px) {
  .result:last-of-type {
    padding-bottom: 24px;
    margin-bottom: 64px;
  }
  .result__summary {
    margin-bottom: 24px;
  }

  .result__none {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0.004em;
  }
}
@media only screen and (max-width: 734px) {
  .result:last-of-type {
    margin-bottom: 44px;
  }
  .result__summary {
    margin-top: 32px;
  }

  .result__none {
    font-size: 28px;
    line-height: 1.28583;
    font-weight: 400;
    letter-spacing: 0.007em;
  }

  //搜索
  #search-wrapper {
    width: auto;
  }
}
</style>
